<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 由于按顺序执行，所以下面的代码出错，不会弹出
        // var button = document.querySelector('button');
        // button.addEventListener('click', function() {
        //     alert('11');
        // } )
        
        // ①onload方法，等待dom，图片，css等全部加载完
        // 传统方法具有唯一性，起作用只能是最后一个
        window.onload = function() {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('11');
        } )
        }

        // 事件监听方法可以绑定多个
        window.addEventListener('load', function () {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('131');
        })
        })
        
        window.addEventListener('load', function () {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
            alert('132');
        })
        
        })
        // ②DOMContentLoaded,等待加载完dom就
        window.addEventListener('DOMContentLoaded', function () {
            alert('22222')
        })
    </script>
    <button>点击</button>
</body>
</html>